<template>
  <div>
    <div
      class="ccc"
      style="
        width: 560px;
        border: 1px solid #ddd;
        border-radius: 2px;
        padding: 0px;
        display: flex;
        justify-content: space-between;
      "
      v-for="(ar, index) in arr"
      :key="index"
    >
      <label>
        <input
          type="checkbox"
          v-model="ar.complete"
          @change="ck($event, index)"
        />
        <samp style="font-size: 14px">{{ ar.name }}</samp>
      </label>
      <button
        style="background-color: red; color: white; border: 1px solid #ddd"
        @click="ck1(index)"
      >
        删除
      </button>
    </div>
  </div>
</template>
<script>


export default {
  props: ["arr"],
  data() {
    return {
      num: 0,
      // complete1:this.complete
    };
  },
  created() {},
  computed: {},
  methods: {
    ho(val) {
      this.ho = val;
    },
    ck(e, index) {
      let shu = 0;
      this.arr[index].complete = e.target.checked;
      localStorage.setItem('data', JSON.stringify(this.arr)) 
      for (let i = 0; i < this.arr.length; i++) {
        if (this.arr[i].complete == true) {
          shu += 1;
          
        }
      }
      this.$emit("num1", shu);
    },
    ck1(index) {
      this.arr.splice(index, 1);
      if (this.arr.length==0) {
        this.$emit("shu1111", false);
          }
      localStorage.setItem("data", JSON.stringify(this.arr));
    },
  },
};
</script>
<style lang='less' scoped>
button {
  display: none;
}
.ccc:hover button {
  display: block;
}
</style>
